// 引入React
 import React from "react"
// 设计Dom渲染包
import ReactDom from "react-dom"
// 准备数据
const arr = [
  { id: 1, name: 'Vue' },
  { id: 2, name: 'React' },
  { id: 3, name: 'Angular' },
]
// 渲染数据
// const ele = (
//   <ul>
//     <li>{arr[0].name}</li>
//     <li>{arr[1].name}</li>
//     <li>{arr[2].name}</li>
//   </ul>
// )
// const ele = [
//   <li>{arr[0].name}</li>,
//   <li>{arr[1].name}</li>,
//   <li>{arr[2].name}</li>
// ]
// {}里面可以放数组
// JS 中的 map 方法可以返回数组，只要把返回的结果和上面保持一致，就可以完成效果啦
/* const arrTemp = arr.map((item) => <li key={item.id}>{item.name}</li>)
const el = <ul>{arrTemp}</ul> */
// key: 唯一
// 作用：性能优化
// 加在哪里？循环谁，加在谁上面
const ele =(
  <ul>
    {arr.map((item) => (
      <li key={item.id}>
        {item.name}
        <span>xxx</span>
      </li>
    ))}
  </ul>
)

ReactDom.render(ele,document.querySelector('#react'))